<template>
  <div :class="className">
    <!-- style -->
    <div v-html="css"></div>

    <div v-if="datas.list">
      <div id="tab">

        <div class="nav nav-bgimage" v-if="datas.list.length > 0">
          <div class="nav-li" :class="[item.active?'nav-selected':'']"
               v-for="(item, index) in datas.list" :key="index">
            <div class="nav-lis">
              {{item.name || item.component}}
            </div>
          </div>
        </div>

        <div class="tab-item" v-for="(item, index) in datas.list" :key="index">
            <component
              v-show="item.active"
              :is="item.uikey"
              :id="id+'-'+index"
              :datas="handleDatas(item.datas)"
              :languages="languages">
            </component>
        </div>

        <div v-if="datas.list.length <= 0" style="padding: 15px;text-align: center">
          暂无设置选项卡
        </div>

      </div>
    </div>
  </div>
</template>

<script>
	import emptyImage from "@/resource/images/banner.png";
// 自定义样式
const css = function() {
  const {
	  tab_bg_color,
	  tab_color,
	  tab_active_color
  } = this.datas;

  return `
        .component-${this.id}  .nav-bgimage{
            background-color: ${tab_bg_color};
            color: ${tab_color};
        }

        .component-${this.id}  .nav-bgimage .nav-selected{
            color: ${tab_active_color};
            border-bottom: 2px solid ${tab_active_color};
        }
    `;
};

export default {
  data() {
    return {
	    emptyImage,
    };
  },
  props: ["id", "datas", "styles"],
  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    },
	  /**
	   * 语言包
	   * @return {object}
	   */
	  languages () {
		  return this.$store.state.page.languages || {};
	  }
  },

  methods: {
	  // 功能数据
	  handleDatas (old_data) {
		  // 如果有配置项的话
		  let datas = {};
		  if (old_data) {
			  Object.keys(old_data).map(key => {
				  datas[key] = old_data[key].value;
			  });
		  }
		  return datas;
	  },
    // rem转换
    px2rem(val = 0) {
      return val / 75 + "rem";
    },
  },

  mounted() {
    this.$emit("loaded");
  },
};
</script>

<style lang="less" scoped>
// 默认
* {
  list-style-type: none;
}
.component-wrapper {
  width: 375px;
}
#tab {
  .nav {
    display: flex;
    align-items: center;
    height: 40px;
    white-space: nowrap;
    flex-wrap: nowrap;
    box-sizing: content-box;
    .nav-li {
      flex: 1;
      min-width: 20%;
      text-align: center;
      .nav-lis {
        display: inline-block;
        line-height: 40px;
      }
    }
  }

  .scroll {
    overflow-x: scroll;
  }
}
</style>
